//懒得写脚本,直接复制这边基础结构
import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'

//import Using ES6 syntax
import WeUI from 'react-weui';
import 'whatwg-fetch'
const {
    Cells,
    CellsTitle,
    Cell,
    CellBody,
    CellFooter, Toast, Toptips
} = WeUI;

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';

export default class TeamList extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.ZoneList = this.ZoneList.bind(this);
        this.state = {
            teamData: [],
            showLoading: true,
            showToptips: false,
            showToast: false,
            loadingTimer: null,
            toastTimer:null,
            warnTimer:null,
            topTipsMsg: "服务器错误！",
        }
    }


    showWarn(error) {
        this.setState({showToptips: true,topTipsMsg:error, showLoading: false});
        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }


    componentWillMount() {
        fetch(getHost() + "/team", {
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.data && data.data.length > 0) {
                        let teamData = [];
                        for (let i = 0; i < data.data.length; i++) {
                            let teamName = data.data[i];
                            if (teamName.name.length > 15) {
                                teamName.name = teamName.name.substring(0, 15) + "..."
                            }
                            teamData.push(teamName);
                        }
                        this.setState({teamData: teamData, showLoading: false});
                    } else {
                        markDataRequestFlag();
                        location.hash = "/CreateTeam";
                        return;
                    }
                } else {
                    this.showWarn(data.error.message);
                }
            }).catch(e => {
            this.showWarn(e.error.message);
        });
    }

    componentDidMount() {
    }

    LeftClick(){
        location.hash = "/UserCenter";
    }

    CreateClick(){
        location.hash = "/CreateTeam";
    }

    ZoneList(id,admin) {
        if(admin === false){
            this.showWarn("当前企业您无权限预定,请联系公司管理员预定");
            return;
        }
        let me = this;
        fetch(getHost() + "/team/choose/" + id, {
            method: 'POST',
            credentials: 'include'
        }).then(response => response.json())
            .then(d => {
                if (d.success) {
                    markDataRequestFlag();
                    location.hash = "/ZoneList";
                } else {
                    me.showWarn(d.error.message);
                }
            }).catch(e => {
            me.showWarn();
        });
        return;
    }

    render() {
        let teamNameHtml = null;
        if (this.state.teamData.length > 0) {//有团队
            teamNameHtml = <div style={{marginTop: "0.9rem"}}>
                <cells>
                    {this.state.teamData.map((tempData, index) =>
                        <Cell key={"t" + index} style={{background: "#FFFFFF"}}
                              onClick={this.ZoneList.bind(this, tempData.id,tempData.admin)} access>
                            <CellBody >{tempData.name}</CellBody>
                            <CellFooter/>
                        </Cell>
                    )}
                    <Cell style={{background: "#FFFFFF"}}
                          onClick={this.CreateClick} access>
                        <CellBody >新企业</CellBody>
                        <CellFooter/>
                    </Cell>
                </cells>
            </div>
        }
        return (
            <div>
                <NavigationBar Title="选择企业" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <CellsTitle id="TeamListTitle">选择为哪个企业租工位</CellsTitle>
                {teamNameHtml}
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
            </div>
        )
    }
}
//属性默认值
TeamList.defaultProps = {};

//属性
TeamList.propTypes = {};